<template>
  <HeaderNav/>
  <article>
    <!-- 网站主体 -->
    <div id="main" class="catalog clearfix">
      <section class="menus">
        <h1 class="catlogs">资源分类</h1>
        <!-- 定义资源类型导航 -->
        <ResourceLeftNav v-model="typeId" :types="resourceTypes" @type-click="queryResources"/>
      </section>
      <!-- 定义左侧窗口信息 -->
      <section class="ct content">
        <!-- 定义每一个资源 -->
        <div class="bread-crumbs">
          <a @click="page=1;queryResourcesPage()">资源分类</a>
          <a v-if="oneType ==null">全部</a>
          <template v-else>
            <a @click="handleType(oneType.id)">{{ oneType.name }}</a>
            <a v-if="twoType !=null">{{ twoType.name }}</a>
          </template>
        </div>

        <NoContent :show="resources.length === 0"/>

        <ResourceItem v-for="(res, index) in resources" :key="index"
                      :ext="res.value.ext" :visit-num="res.score"
                      :score="res.value.score" :title="res.value.resourceName"
                      :size="res.value.size" :id="res.value.id"
                      @click="$router.push({name: 'resource-detail', params: {id: $event}})"/>

        <!-- 分页插件 -->
        <VanPagination v-model="page" :totalItems="total" :itemsPerPage="rows" :showPageSize="5"
                       :forceEllipses="true" @click-page="queryResourcesPage(typeId)"/>

      </section>

    </div>
  </article>
  <Footer/>
</template>

<script>
import HeaderNav from "../components/HeaderNav.vue";
import Footer from "../components/Footer.vue";
import VanPagination from '../components/VanPagination.vue' ;
import ResourceItem from "../components/ResourceItem.vue";
import ResourceLeftNav from '../components/ResourceLeftNav.vue'
import NoContent from "../components/NoContent.vue";

export default {
  components: {
    NoContent,
    HeaderNav,
    Footer,
    VanPagination,
    ResourceItem,
    ResourceLeftNav,
  },
  data() {
    return {
      page: 1,
      rows: 12,
      total: 0,
      oneType: null,  // 一级分类
      twoType: null,  // 二级分类
      typeId: null, // 查询的分类ID
      resourceTypes: [],
      resources: [],
    }
  },
  created() {
    this.queryResourceTypes();
    this.queryResourcesPage(null);
  },
  methods: {
    queryResourceTypes() {
      this.$api.queryResourceTypeList().then(ret => {
        if (ret.status) {
          this.resourceTypes = ret.list
              .filter(type => type.pid == null)
              .map(type => {
                let children = ret.list.filter(t => t.pid === type.id).map(t => ({id: t.id, name: t.name}))
                return {id: type.id, name: type.name, children: children}
              });
        }
      })
    },
    queryResources(oneType, twoType) { // 获取一级类型和二级类型
      this.oneType = oneType;
      this.twoType = twoType;
      this.page = 1 ;
      // 如果 类型为空，则使用全文检索，查询所有
      this.queryResourcesPage(twoType.id);
    },
    async queryResourcesPage(typeId) {
      let ret = false;
      if (typeId == null) {
        this.oneType = null;
        this.twoType = null ;
        this.typeId = null ;
        ret = await this.$api.queryResourcesBySearch(this.page, this.rows);
      } else {
        // 根据资源ID , 查询资源信息
        ret = await this.$api.queryResourcesByPage(this.page, this.rows, typeId);
      }
      if (ret && ret.status) {
        this.resources = ret.data.list;
        this.total = ret.data.total;
      }
    },
    handleType(typeId) {
      this.queryResourcesPage(typeId);
      this.twoType = null;
      this.typeId = null;
      this.page = 1
    }
  },
}

</script>

<style>
</style>